import type { RouteRecordRaw } from 'vue-router'
import type { App } from 'vue'

import { createRouter, createWebHistory } from 'vue-router'
import PATH from './path'
import { createRouterGuards } from './guards'

import Layout from '../layout/index.vue'
import BlankLayout from '../components/BlankLayout.vue'

/**
 * name: 'router-name'
 * 设定路由的名字
 *
 * redirect: ''
 * 设置重定向，同时给 breadcrumb 使用
 *
 * meta: {
 *   title: 'title'
 *   设置该路由在 sidebar 和 breadcrumb 中展示的名字
 *
 *   icon: ''
 *   例如 'el-icon platform'
 *   设置该路由的图标
 *
 *   hidden: boolean (默认 false)
 *   当设置 true 的时候该路由不会在 sidebar 出现 如401，login等页面，或者如一些编辑页面/edit/1
 *
 *   alwaysShow: boolean (默认 false)
 *   当你一个路由下面的 children 声明的路由大于1个时，自动会变成嵌套的模式
 *   只有一个时，会将那个子路由当做根路由显示在 sidebar
 *   若你想不管路由下面的 children 声明的个数都显示你的根路由
 *   你可以设置 alwaysShow: true，这样它就会忽略之前定义的规则，一直显示根路由
 *
 *   breadcrumb: boolean (默认 true)
 *   如果设置为 false，则不会在 breadcrumb 中显示
 *
 *   ifBreadRedirect: boolean (默认 true)
 *   如果设置为 false，则在 breadcrumb 中不可点击
 *
 *   breadList: []
 *   自定义面包屑
 *
 *   roles: ['admin','editor']
 *   设置该路由进入的权限，支持多个权限叠加
 *
 *   activeMenu: '/example/list'
 *   当路由设置了该属性，则会高亮相对应的侧边栏。
 *   这在某些场景非常有用，比如：一个文章的列表页路由为：/article/list
 *   点击文章进入文章详情页，这时候路由为 /article/1，但你想在 sidebar 高亮文章列表的路由，就可以进行如下设置
 * }
 * */

export interface BreadListItem {
  title: string,
  path: string,
}

type Meta = Partial<{
  title: string,
  icon: string,
  hidden: boolean,
  alwaysShow: boolean,
  breadcrumb: boolean,
  ifBreadRedirect: boolean,
  breadList: BreadListItem[],
  roles: string[],
  activeMenu: string,
}>

export type RouteRecordType = RouteRecordRaw & { meta: Meta, children?: RouteRecordType[] }

// 静态路由，登录之前就存在的路由
export const constantRoutes: RouteRecordType[] = [
  {
    path: PATH.login,
    component: () => import('@/views/login/index.vue'),
    meta: { hidden: true }
  },
]

// 动态路由，登录之后动态添加的路由
export const asyncRoutes: RouteRecordType[] = [
  {
    path: '/',
    redirect: PATH.dashboard.console,
    meta: { hidden: true },
  },
  {
    path: PATH.dashboard.base,
    redirect: PATH.dashboard.console,
    component: Layout,
    meta: { title: 'Dashboard', icon: 'svg dashboard' },
    children: [
      {
        path: PATH.dashboard.console,
        component: () => import('@/views/dashboard/console/index.vue'),
        meta: { title: '主控台' }
      },
      {
        path: PATH.dashboard.workplace,
        component: () => import('@/views/dashboard/workplace/index.vue'),
        meta: { title: '工作台' }
      },
    ]
  },
  {
    path: PATH.list.base,
    redirect: PATH.list.basicList,
    component: Layout,
    meta: { title: '列表页面', icon: 'svg table', alwaysShow: true, ifBreadRedirect: false },
    children: [
      {
        path: PATH.list.basicList,
        component: () => import('@/views/list/basicList/index.vue'),
        meta: { title: '基础列表' }
      },
      {
        path: `${PATH.list.basicDetail}/:id`,
        component: () => import('@/views/list/basicDetail/index.vue'),
        meta: {
          title: '基础详情',
          hidden: true,
          breadList: [
            { title: '列表页面', path: '' },
            { title: '基础列表', path: PATH.list.basicList },
            { title: '基础详情', path: '' },
          ],
          activeMenu: PATH.list.basicList
        }
      }
    ]
  },
  {
    path: PATH.system.base,
    redirect: PATH.system.menu,
    component: Layout,
    meta: { title: '系统设置', icon: 'el-icon Operation' },
    children: [
      {
        path: PATH.system.menu,
        component: () => import('@/views/system/menu/index.vue'),
        meta: { title: '菜单权限管理' }
      },
      {
        path: PATH.system.role,
        component: () => import('@/views/system/role/index.vue'),
        meta: { title: '角色权限管理' }
      },
    ]
  },
  {
    path: PATH.externalLink.base,
    component: Layout,
    meta: { title: '链接' },
    children: [
      {
        path: PATH.externalLink.link,
        component: BlankLayout,
        meta: { title: 'External Link', icon: 'el-icon Platform' }
      }
    ]
  },
  {
    path: '/:pathMatch(.*)*',
    redirect: '/',
    meta: { hidden: true }
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes: constantRoutes,
  scrollBehavior: () => ({ left: 0, top: 0 }),
})
export default router

export function setupRouter(app: App) {
  app.use(router)
  // 创建路由守卫
  createRouterGuards(router)
}
